<template>
    <div>
         <!-- 面包屑导航条 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户实名认证失败</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
          <el-row>
              
                <!--工具条-->
                <el-form :inline="true" :model="searchfrom" class="toolbar" label-position="right" label-width="70px">
                    <el-row>
                       
                        <el-form-item label="手机号">
                            <el-input v-model="searchfrom.queryString"></el-input>
                        </el-form-item>
                     
                        <el-form-item label="">
                            <el-button @click="searchUserList" type="success" style="width: 170px">查询</el-button>
                        </el-form-item>
                    </el-row>
                </el-form>
            </el-row>
             <el-table
                :data="userlist"
                border
                style="width: 100%">
                <el-table-column
                type="index">
                </el-table-column>
                <el-table-column
                prop="idCard"
                label="身份证"
                width="120">
                </el-table-column>
                
                <!-- <el-table-column
                prop="email"
                label="邮箱">
                </el-table-column> -->
                <el-table-column
                prop="name"
                label="姓名"
                width="100">
                </el-table-column>
                <el-table-column
                prop="mobile"
                label="手机号"
                width="100">
                </el-table-column>
                 <el-table-column
                prop="remark"
                label="备注"
                width="200"
                >
                </el-table-column>
                <el-table-column
                label="正面">
                <template slot-scope="scope">
                 <el-image 
                    style="width: 50px; height: 30px;"
                    :src="appendurl+scope.row.photoZ" 
                    :preview-src-list="srcList" @click="checkimg(scope.row.photoZ)">
                </el-image>
                </template>
                </el-table-column>
                <el-table-column
                
                label="反面">
                 <template slot-scope="scope">
                 <el-image 
                    style="width: 50px; height: 30px;"
                    :src="appendurl+scope.row.photoF" 
                    :preview-src-list="srcList" @click="checkimg(scope.row.photoF)">
                </el-image>
                </template>
                </el-table-column>
                <el-table-column
               
                label="活体">
                 <template slot-scope="scope">
                 <el-image 
                    style="width: 50px; height: 30px;"
                    :src="appendurl+scope.row.photoR" 
                    :preview-src-list="srcList" @click="checkimg(scope.row.photoR)">
                </el-image>
                </template>
                </el-table-column>
                <!-- 让这一行的开关，把状态绑定到 这一行数据的 mg_state 上 -->
                <!-- <el-switch
                    v-model="scope.row.mg_state"
                    @change="(newState) => {switchChanged(newState, scope.row.id)}"
                    slot-scope="scope">
                </el-switch> -->
                <!-- <el-switch
                    v-model="scope.row.mg_state"
                    @change="switchChanged2(scope.row.mg_state, scope.row.id)"
                    slot-scope="scope">
                </el-switch> -->
                <el-table-column
                
                label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="showEditTongguo(scope.row)">通过</el-button>
                    <el-button type="danger" size="mini" @click="showEditJujue(scope.row)">拒绝</el-button>
                    <!-- <el-button type="danger" v-if="scope.row.status == 0" size="mini" @click="showEditJiefeng(scope.row)">解封</el-button> -->
                    <!-- <el-button type="primary" v-if="scope.row.status == 1" size="mini" @click="showEditDialog(scope.row)">封号</el-button> -->
                    <!-- <el-button type="danger" icon="el-icon-delete" size="mini" @click="remove(scope)"></el-button>
                    <el-tooltip effect="dark" content="分配角色" placement="top" :enterable="false">
                    <el-button type="warning" icon="el-icon-setting" size="mini" @click="showSetRoleDialog(scope.row)"></el-button>
                    </el-tooltip> -->
                </template>
                </el-table-column>
            </el-table>

            <!-- 分页区域 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="searchfrom.pageNo"
                :page-sizes="[2, 5, 10, 15]"
                :page-size="searchfrom.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>
<script>
export default {
  data() {
    return {
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [],
      userlist: "",
      searchfrom: {
        queryString:'',
        pageNo: 1,
        pageSize: 10
      },
      total: 15,
      appendurl: '/picture/'
    };
  },
  mounted() {
    this.getuserRealName();
  },
  methods: {
    searchUserList(){
       this.getuserRealName();
    },
     // 监听 pagesize 的变化
    handleSizeChange(newSize) {
      // 把最新的 pagesize 赋值给 this.queryinfo
      this.searchfrom.pageSize = newSize;
      this.getuserRealName();
    },
    // 监听 页码值 的变化
    handleCurrentChange(newPageNum) {
      console.log(newPageNum);
      this.searchfrom.pageNo = newPageNum;
      this.getuserRealName();
    },
    showEditTongguo(row) {
      this.$confirm("请确认是否通过该用户实名认证, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .post("/manage/admin/idCardSuccess", {
              queryId: row.userId
            })
            .then(res => {
              if (res.data.status == 1) {
                   this.getuserRealName()
                this.$message({
                  message: "已通过",
                  type: "success"
                });
              } else {
                this.$message({
                  message: res.data.message,
                  type: "error"
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    showEditJujue(row) {
      this.$confirm("请确认是否拒绝通过该用户实名认证, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .post("/manage/admin/idCardFail", {
              queryId: row.userId
            })
            .then(res => {
              if (res.data.status == 1) {
                  this.getuserRealName()
                this.$message({
                  message: "已拒绝",
                  type: "success"
                });
              } else {
                this.$message({
                  message: res.data.message,
                  type: "error"
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    checkimg(img) {
      this.srcList = []
        // var url = window.location.href;
        // console.log(url)
        let newImg = 'https://www.chayiweilai.com'+ this.appendurl +img
        console.log(newImg)
      this.srcList.push(newImg);
    },
    getuserRealName() {
        
      this.$http
        .post("/manage/admin/idCardFailList", this.searchfrom)
        .then(res => {
          // console.log(res)
          if (res.data.status == 1) {
            this.userlist = res.data.data.list;
            
            this.total = res.data.data.total
          }
        });
    }
  }
};
</script>

<style lang="less" scoped>
</style>
